<template>
  <view class="afterSalePopupCom">
    <u-popup :show="afterSalePopupShow" mode="bottom" @close="afterSalePopupClose" :round="10">
      <view class="afterSalePopup">
        <view class="afterSalePopup_inner_top">
          <view class="fn-sz-34 fn-cl-333333">申请售后</view>
          <image class="icon-30" @tap="afterSalePopupShow = false" src="../../static/images/icon/icon_gary_radios_fill.png" mode=""></image>
        </view>
        <view class="sale_pro_list">
          <view class="sale_pro_item" v-for="(item, index) in orderInfo.product" :key="index" @tap="addProReturn(item.team_product_id)">
            <image v-if="chooseList.indexOf(item.team_product_id) != -1" class="icon-34 mar-right-16"
              src="../../static/images/icon/icon_check_raido_fill.png" mode=""></image>
            <image v-else class="icon-34 mar-right-16" src="../../static/images/icon/icon_check_raido_gary.png" mode=""></image>
            <span class="fn-sz-30 fn-cl-333333">{{ item.product_name }}</span>
          </view>
        </view>
        <view class="message_input"><textarea v-model="returnObj.refund_reason" placeholder="请输入申请理由"></textarea></view>
        <view class="area-title">商品照片</view>
        <view class="upload_img_list">
          <uploadImage :maxCount="9" @success="uploadSuccess"></uploadImage>
        </view>
        <view class="yellow_btn" @tap="submitRate">确认提交</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import Rate from '../rate/rate.vue';
import uploadImage from '../uploadImage/uploadImage.vue';

export default {
  name: 'afterSalePopup',
  components: {
    Rate, uploadImage
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      afterSalePopupShow: false,
      qiniuUrl: 'http://qiniu.zhinh.cn/',
      messageObj: {
        content: '',
        images: ''
      },
      chooseCurProIndex: '',
      chooseList: [],
      returnObj: {
        refund_reason: '',
        refund_images: ''
      },
      team_product_id: ''
    };
  },
  methods: {
    afterSalePopupClose () {
      this.afterSalePopupShow = false;
    },
    submitRate () {
      let params = { ...this.returnObj, order_id: this.orderInfo.id, product_ids: this.chooseList + '' };
      this.$api.applyRefund(params).then(res => {
        this.$helper.toast(res.msg);
        if (res.code == 1) {
          this.$emit('successSubmitRate');
          this.afterSalePopupShow = false;
        }
      });
    },
    uploadSuccess (val) {
      this.returnObj.refund_images = val.map(item => this.qiniuUrl + item.url) + '';
    },
    addProReturn (id) {
      if (this.chooseList.indexOf(id) != -1) {
        this.chooseList = this.chooseList.filter(item => item != id);
      } else {
        this.chooseList.push(id);
      }
      console.log(id, '当前选择的id', this.chooseList);

    }
  }
};
</script>

<style lang="scss">
.afterSalePopupCom {
  .afterSalePopup {
    padding: 24rpx;
    .afterSalePopup_inner_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
    }
    .sale_pro_list {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .sale_pro_item {
        display: flex;
        align-items: center;
        margin-right: 48rpx;
      }
    }
  }
}
.message_input {
  height: 200rpx;
  box-sizing: border-box;
  background: #f9f9f9;
  border-radius: 10rpx;
  padding: 20rpx 26rpx;
  margin-bottom: 40rpx;
  textarea {
    color: #999999;
    font-size: 28rpx;
  }
}
.upload_img_list {
  margin-bottom: 40rpx;
}
</style>
